{% extends "base3-left.html" %}
{% load staticfiles %}
{% load mytags %}

{% block css %}
<link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap-datetimepicker.min.css' %}">
<link rel="stylesheet" href="{%static 'plugins/select2/select2.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">


<!-- iCheck for checkboxes and radio inputs -->
{% endblock %}

{% block content %}

<!-- Content Header (Page header) -->
<section class="content-header margin-bottom">
  <ol class="breadcrumb">
    <li><a href=""><i class="fa fa-dashboard"></i>评审系统</a></li>
    <li class="active"><a href="{{ menu.parent.url }}">{{ menu.parent.title }}</a></li>
    <li class="active"><a href="{{ menu.url }}">{{ menu.title }}</a></li>
  </ol>
</section>
    <!-- Main content -->
  <section class="content">
     <div id="devlist">
        <div class="box box-primary" id="liebiao">
            <div class="box-header">
                <div class="btn-group pull-left">
                    <button type="button" id="btnRefresh" class="btn btn-success">
                        <i class="glyphicon glyphicon-repeat"></i>刷新
                    </button>
                </div>
                <div class="btn-group pull-left">&nbsp</div>
                <div class="btn-group pull-left">
                    <button type="button" id="btnDelete" class="btn btn-danger">
                        <i class="glyphicon glyphicon-trash"></i>删除
                    </button>
                </div>
            </div>
            <div class="box-body" >
                <table id="dtbList" class="display" cellspacing="0" width="100%">
                    <thead>
                        <tr valign="middle">
                            <th><input type="checkbox" id="checkAll"></th>
                            <th>ID</th>
                            <th>通知</th>
                            <th>读者</th>
                            <th>是否已读</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

                <br> <br>
            </div>
        </div>
     </div>
  </section>

    <!-- /.content -->

{% endblock %}

{% block javascripts %}
  <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
  <script src="{% static 'plugins/datatables/dataTables.const.js' %}"></script>
  <script src="{% static 'js/plugins/layer/layer.js' %}"></script>
  <!-- iCheck 1.0.1 -->
  <script type="text/javascript">
	$(function() {
	    $('#PERSONAL-NEWS').addClass('active');
	});
  </script>

  <script type="text/javascript">
    var oDataTable=null;
    $(function() {
        oDataTable = initTable();
        function initTable() {
            var oTable=$('#dtbList').DataTable($.extend(true,{},
                            DATATABLES_CONSTANT.DATA_TABLES.DEFAULT_OPTION,
                            {
                                ajax : {
                                    "url":"{% url 'personal_news_list' %}",
                                    "data":function ( d ) {
                                        d.select=$("#select").val();
                                    }
                            },
                            columns : [
                                    DATATABLES_CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,
                                    {
                                        data : "id",
                                        width : "10%",
                                    },{
                                        data : "news__title",
                                        width : "40%",
                                        bSortable : "false",
                                        render : function(data, type, row, meta) {
                                            var ret="";
                                            var ret="<a href='#' onclick='shownews("+data.split(',')[1]+")'>"+data.split(',')[0]+"</a>";
                                            return ret;
                                        }
                                    },{
                                        data : "user__name",
                                        width : "20%",
                                    },{
                                        data : "isreaded",
                                        width : "20%",
                                        color:"red",
                                        render : function(data, type, row, meta) {
										if (data){
										    var ret = "<a href='#' onclick='return false' style='color: #00ca6d'>已读</a>";
											return ret;
										}else{
										    var ret = "<a href='#' onclick='return false' style='color: red'>未读</a>";
											return ret;
										}
									}
                                    },
                                    {
                                        data : "id",
                                        width : "12%",
                                        bSortable : "false",
                                        render : function(data, type, row, meta) {
                                            var ret="";
                                            var ret="<button title='删除' onclick='doDelete("
                                                + data + ")'><i class='glyphicon glyphicon-trash'></i></button>";
                                            return ret;
                                        }
                                    } ],
                            "order":[
                        [1, 'id']
                           ],
                            }));
            console.log({{ data }});
            return oTable;
        }

        //checkbox全选
        $("#checkAll").on("click", function () {
            if ($(this).prop("checked") === true) {
                $("input[name='checkList']").prop("checked", $(this).prop("checked"));
                $('#example tbody tr').addClass('selected');
            } else {
                $("input[name='checkList']").prop("checked", false);
                $('#example tbody tr').removeClass('selected');
            }
        });


        $("#btnRefresh").click(function(){
            oDataTable.ajax.reload();
        });

        //批量删除
        $("#btnDelete").click(function() {
            if ($("input[name='checkList']:checked").length == 0){
                layer.msg("请选择要删除的记录");
                return ;
            }

            var arrId= new Array();
            $("input[name='checkList']:checked").each(function(){
                //alert($(this).val());
                arrId.push($(this).val());
            });

            sId=arrId.join(',');

            layer.alert('确定删除这些通知吗？', {
                title:'提示'
                ,icon: 3 //0:感叹号 1：对号 2：差号 3：问号 4：小锁 5：哭脸 6：笑脸
                ,time: 0 //不自动关闭
                ,btn: ['YES', 'NO']
                ,yes: function(index){
                    layer.close(index);
                    $.ajax({
                        type: "POST",
                        url : "{% url 'personal_news_delete' %}",
                        data : {"id":sId, csrfmiddlewaretoken: '{{ csrf_token }}'},
                        cache: false,
                        success : function(msg) {
                            if (msg.result){
                                layer.alert("操作成功",{icon:1});
                                oDataTable.ajax.reload();
                            }else{
                                //alert(msg.message);
                                layer.alert("操作失败",{icon:2});
                            }
                            return ;
                        }
                    });
                }
            });
        });

    });


    //删除单个数据
    function doDelete(id){
        layer.alert('确定删除此通知吗？', {
            title:'提示'
            ,icon: 3 //0:感叹号 1：对号 2：差号 3：问号 4：小锁 5：哭脸 6：笑脸
            ,time: 0 //不自动关闭
            ,btn: ['YES', 'NO']
            ,yes: function(index){
                layer.close(index);
                $.ajax({
                    type: "POST",
                    url : "{% url 'personal_news_delete' %}",
                    data : {"id":id, csrfmiddlewaretoken: '{{ csrf_token }}'},  //防止post数据时报 csrf_token 403
                    cache: false,
                    success : function(msg) {
                        if (msg.result){
                            layer.alert('删除成功',{icon: 1});
                            oDataTable.ajax.reload();
                        }else{
                            //alert(msg.message);
                            layer.alert('删除失败', {icon: 2});
                        }
                        return ;
                    }
                });
            }
        });
    }

    function shownews(id) {
        var div=layer.open({
            type : 2,
            title : '通知',
            shadeClose : false,
            maxmin : true,
            area : [ '800px', '600px' ],
            content : [ "{% url 'personal_news_show' %}"+'?id='+id, 'no' ],
            end : function() {
                oDataTable.ajax.reload();
            }
        });
    }

  </script>
{% endblock %}